<template>
  <div class="data-tab">
    <el-tabs
      :value="currentTab.id"
      type="card"
      editable
      @tab-remove="tabRemove"
      @tab-click="tabChange"
    >
      <el-tab-pane v-for="item in tabs" :key="item.id" :name="item.id">
        <div slot="label" class="tab-label">
          <div class="tab-icon">
            <svg
              t="1621995119436"
              class="svg-icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1290"
              width="12"
              height="12"
            >
              <path
                v-if="item.menuType === 0"
                d="M109.714286 73.142857c-21.942857 0-36.571429 14.628571-36.571429 36.571429v804.571428c0 21.942857 14.628571 36.571429 36.571429 36.571429h804.571428c21.942857 0 36.571429-14.628571 36.571429-36.571429v-804.571428c0-21.942857-14.628571-36.571429-36.571429-36.571429h-804.571428z m0-73.142857h804.571428c58.514286 0 109.714286 51.2 109.714286 109.714286v804.571428c0 58.514286-51.2 109.714286-109.714286 109.714286h-804.571428C51.2 1024 0 972.8 0 914.285714v-804.571428C0 51.2 51.2 0 109.714286 0z m438.857143 292.571429h219.428571c21.942857 0 36.571429 14.628571 36.571429 36.571428s-14.628571 36.571429-36.571429 36.571429h-219.428571c-21.942857 0-36.571429-14.628571-36.571429-36.571429s14.628571-36.571429 36.571429-36.571428z m-219.428572 438.857142c21.942857 0 36.571429-14.628571 36.571429-36.571428S351.085714 658.285714 329.142857 658.285714s-36.571429 14.628571-36.571428 36.571429 14.628571 36.571429 36.571428 36.571428z m0 73.142858C270.628571 804.571429 219.428571 753.371429 219.428571 694.857143S270.628571 585.142857 329.142857 585.142857 438.857143 636.342857 438.857143 694.857143 387.657143 804.571429 329.142857 804.571429z m-7.314286-446.171429L241.371429 277.942857c-14.628571-14.628571-36.571429-14.628571-51.2 0-14.628571 14.628571-14.628571 36.571429 0 51.2L292.571429 431.542857c7.314286 7.314286 21.942857 14.628571 29.257142 14.628572s21.942857 0 29.257143-7.314286l153.6-153.6c14.628571-14.628571 14.628571-36.571429 0-51.2-14.628571-14.628571-36.571429-14.628571-51.2 0L321.828571 358.4zM548.571429 658.285714h219.428571c21.942857 0 36.571429 14.628571 36.571429 36.571429s-14.628571 36.571429-36.571429 36.571428h-219.428571c-21.942857 0-36.571429-14.628571-36.571429-36.571428s14.628571-36.571429 36.571429-36.571429z"
                p-id="1291"
              ></path>
              <g v-else>
                <path
                  d="M461.197144 115.585365a406.415222 406.415222 0 0 0-103.610344 25.537761A455.301793 455.301793 0 0 0 60.619124 567.968557 427.575081 427.575081 0 0 0 73.02318 659.174845a437.790186 437.790186 0 0 0 29.915662 91.935939 72.965031 72.965031 0 0 1 60.560976-32.104613 63.479577 63.479577 0 0 1 23.34881 4.377902 357.528652 357.528652 0 0 1-29.915663-91.935939A383.796063 383.796063 0 0 1 145.98821 567.968557a369.932707 369.932707 0 0 1 224.732296-338.557744 343.665296 343.665296 0 0 1 86.098736-24.80811 68.587129 68.587129 0 0 1-13.133705-41.590068 72.965031 72.965031 0 0 1 17.511607-47.42727z m213.787541 25.537761a408.604173 408.604173 0 0 0-102.880694-25.537761 72.965031 72.965031 0 0 1 17.511608 47.42727 72.965031 72.965031 0 0 1-13.133706 41.590068 338.557744 338.557744 0 0 1 85.369086 24.80811 369.932707 369.932707 0 0 1 223.272995 338.557744 323.235087 323.235087 0 0 1-6.566853 65.668527 322.505437 322.505437 0 0 1-27.726712 87.558038h10.215105a72.965031 72.965031 0 0 1 67.127828 43.779018 405.685572 405.685572 0 0 0 32.834264-96.313841 412.252425 412.252425 0 0 0 11.674405-99.962092A454.572143 454.572143 0 0 0 674.984685 141.123126z m116.014399 672.007935a388.173965 388.173965 0 0 1-68.587129 60.560975 369.203057 369.203057 0 0 1-420.278578-5.837202 348.772848 348.772848 0 0 1-69.31678-65.668528 72.965031 72.965031 0 0 1-61.290626 63.479577 399.84837 399.84837 0 0 0 72.965031 65.668528 453.112842 453.112842 0 0 0 544.319131 0 372.121658 372.121658 0 0 0 72.965031-68.587129 72.965031 72.965031 0 0 1-70.77608-49.616221z"
                  p-id="1022"
                ></path>
                <path
                  d="M160.581217 632.907434h-6.566853A165.63062 165.63062 0 0 0 73.02318 659.174845a160.523068 160.523068 0 0 0 87.558037 291.860124 155.415516 155.415516 0 0 0 80.991184-22.61916 162.712019 162.712019 0 0 0 79.531884-134.985307 160.523068 160.523068 0 0 0-160.523068-160.523068z m0 233.488099a72.965031 72.965031 0 0 1-72.965031-72.965031 72.965031 72.965031 0 0 1 12.404055-40.860417 72.965031 72.965031 0 0 1 60.560976-32.104614 63.479577 63.479577 0 0 1 23.34881 4.377902 72.965031 72.965031 0 0 1 49.616221 68.587129 35.752865 35.752865 0 0 1 0 8.755804 72.965031 72.965031 0 0 1-61.290626 63.479577zM674.984685 141.123126a159.793418 159.793418 0 0 0-317.397885 0v21.889509a157.604467 157.604467 0 0 0 14.593006 66.398178 159.793418 159.793418 0 0 0 291.860124 0 145.930062 145.930062 0 0 0 15.322657-66.398178 111.636497 111.636497 0 0 0-4.377902-21.889509zM516.650568 235.977666a72.965031 72.965031 0 0 1-59.831326-31.374963 68.587129 68.587129 0 0 1-13.133705-41.590068 72.965031 72.965031 0 0 1 72.965031-72.965031 72.965031 72.965031 0 0 1 55.453423 25.537761 72.965031 72.965031 0 0 1 17.511608 47.42727 72.965031 72.965031 0 0 1-13.133706 41.590068 72.965031 72.965031 0 0 1-59.831325 31.374963zM961.007606 667.930649A159.793418 159.793418 0 0 0 875.63852 633.637084h-14.593006a160.523068 160.523068 0 0 0-72.965031 302.075229 155.415516 155.415516 0 0 0 72.965031 18.970908 160.523068 160.523068 0 0 0 99.962092-286.022922z m-99.962092 198.464884a72.965031 72.965031 0 0 1-72.965031-53.264472 58.372025 58.372025 0 0 1 0-19.700559 72.965031 72.965031 0 0 1 62.749926-72.965031h10.215105a72.965031 72.965031 0 0 1 67.127828 43.779019 77.342933 77.342933 0 0 1 5.837203 29.186012 72.965031 72.965031 0 0 1-72.965031 72.965031z"
                  p-id="1023"
                ></path>
              </g>
            </svg>
          </div>
          {{ item.name }}
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "DataTab",
  computed: {
    ...mapState({
      currentTab: ({ data }) => {
        return data.currentTab || {};
      },
      tabs: ({ data }) => {
        return data.tabs || [];
      }
    })
  },
  methods: {
    ...mapMutations(["deleteTab", "setCurrentTab"]),
    tabRemove(id) {
      this.deleteTab(id);
    },
    tabChange({ name }) {
      let currentTab = this.tabs.find(tab => tab.id === name);
      currentTab && this.setCurrentTab(currentTab);
    }
  }
};
</script>
<style lang="scss">
.data-tab {
  .el-tabs__header {
    margin-bottom: 0;
  }
  .el-tabs__item {
    position: relative;
    height: 32px;
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    &.is-active:before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      right: 0;
      height: 4px;
      background: #409eff;
    }
    &.is-active .tab-icon svg,
    &:hover .tab-icon svg {
      fill: #409eff;
    }
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border-radius: 0;
    border-left: none;
    border-top: none;
  }
  .el-tabs__new-tab {
    display: none;
  }

  .tab-label {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    .tab-icon {
      margin-right: 4px;
      margin-top: 2px;
    }
  }
}
</style>
